<template>
	<el-col :span="12">
		<div class="table-background-color bg-chart">
			<i class="title-icon"></i>
			<el-tooltip effect="light" :content="contentText" placement="top-start" style="z-index: 999">
				<i class="question-icon" :style="{ left: questionIconLeft }">
					<svg-icon icon-class="question"></svg-icon>
				</i>
			</el-tooltip>
			<div style="height: 400px; width: 100%" :id="Id"></div>
			<div v-show="noDataFlag" class="yd-smoonthline-no-data">暂无数据</div>
		</div>
	</el-col>
</template>

<script setup name="YdSmoothLine" lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted, onDeactivated, onActivated, onUnmounted, getCurrentInstance, watch } from 'vue';
import { resizeMixins } from '@/mixins/resize';

const instance = getCurrentInstance();
const proxy = instance?.proxy;
const lineType = ref('line');
const subTitle = ref('');
const legendArray = ref(['业务1', '业务2', '业务3']); //legend名字数组
const seriesData = ref<anyObj[]>([]); //将返回的三条数据封装成对象数组,
const axisChange = ref<string[]>([]);
const legendLength = ref<number>();
const contentText = ref('');
const placement = ref('');
const activatedFlag = ref(false);
let chartIns = ref();
const questionIconLeft = ref('155px');
const noDataFlag = ref(false);
const initFlag = ref(false);
// const props = defineProps({
// 	Id: '', //echart图表唯一标识
// 	lineTitle: '', //折线图的第一标题
// 	echartsData: [], //折线图的第一标题
// 	businessName: [],
// 	xAxis: [], //横坐标的数据
// });

const props = defineProps<{
	Id: string;
	lineTitle: string;
	echartsData: any[];
	businessName: any[];
	xAxis: any[];
}>();

onMounted(() => {
	init();
	activatedFlag.value = true;
	chartIns.value = echarts.init(document.getElementById(props.Id) as HTMLElement);
	initFlag.value = true;
	onSidebarChange();
});
watch(
	() => props.echartsData,
	(val: any) => {
		// 监听联动参数
		if (val && initFlag.value) {
			init();
		}
	},
	{ deep: true, immediate: true }
);
watch(
	() => props.xAxis,
	(val: any) => {
		// 监听联动参数
		if (val && initFlag.value) {
			init();
		}
	},
	{ deep: true, immediate: true }
);

//父组件传入更新数据时,重新渲染图表展示新数据
onUnmounted(() => {
	window.removeEventListener('resize', function () {
		chartIns.value.resize();
	});
	let sidebar = document.getElementsByClassName('sidebar-container')[0];
	sidebar && sidebar.removeEventListener('transitionend', function (e: any) {});
});
onActivated(() => {
	activatedFlag.value = true;
	chartIns.value.resize();
});
onDeactivated(() => {
	activatedFlag.value = false;
});

function onSidebarChange() {
	let sidebar = document.getElementsByClassName('sidebar-container')[0];
	sidebar &&
		sidebar.addEventListener('transitionend', function (e: any) {
			if (e.propertyName === 'width') {
				chartIns.value?.resize();
			}
		});
}

//判断业务名称数组,并封装sries对象
function businessGetName() {
	legendArray.value = [];
	seriesData.value = [];
	legendLength.value = props.businessName.length;
	//将健康度的小数值改为整数
	// if (props.Id === "health") {
	//   for (let i = 0; i < props.echartsData.length; i++) {
	//     for (let j = 0; j < props.echartsData[i].length; j++) {
	//       if (props.echartsData[i][j] !== null) {
	//         props.echartsData[i][j] = (props.echartsData[i][j] * 100).toFixed(2);
	//       }
	//     }
	//   }
	// }

	if (legendLength.value === 1) {
		legendArray.value = ['当前值', '环比', '同比'];
		for (let i = 0; i < props.echartsData.length; i++) {
			let obj: anyObj = {};
			obj.name = legendArray.value[i];
			obj.type = lineType;
			obj.symbolSize = 3;
			obj.showAllSymbol = true;
			if (legendArray.value[i] === '当前值') {
				obj.itemStyle = {
					normal: {
						color: '#2beded',
						borderColor: 'white',
					},
				};
			} else if (legendArray.value[i] === '环比') {
				obj.itemStyle = {
					normal: {
						color: '#ff9a0c',
						borderColor: 'white',
					},
				};
			} else if (legendArray.value[i] === '同比') {
				obj.itemStyle = {
					normal: {
						color: 'pink',
						borderColor: 'black',
					},
				};
			}
			//健康度的数据将小数处理成整数
			// if(Id==='健康度'){
			//   for(let j=0;j<echartsData.length;j++){
			//     for(let k=0;k<echartsData[j].length;k++){
			//       echartsData[j][k]=echartsData[j][k]*100;
			//     }
			//     obj.data=echartsData[j];
			//     seriesData.push(obj);
			//     console.log('度'+i,echartsData)
			//   }
			//   break;
			// }
			obj.data = props.echartsData[i];
			seriesData.value.push(obj);
		}
	} else {
		//出现对比时候
		for (let i = 0; i < legendLength.value; i++) {
			legendArray.value[i] = props.businessName[i];
			let obj: anyObj = {};
			obj.name = props.businessName[i];
			obj.type = lineType.value;
			obj.symbolSize = 3;
			obj.showAllSymbol = true;
			if (i === 0) {
				obj.itemStyle = {
					normal: {
						color: '#2beded',
						borderColor: 'white',
					},
				};
			} else if (i === 1) {
				obj.itemStyle = {
					normal: {
						color: '#ff9a0c',
						borderColor: 'white',
					},
				};
			}
			//重新封装对象给series
			obj.data = props.echartsData[i];
			seriesData.value.push(obj);
		}
	}
}
//将获取到的时间进行处理
function handleTime() {
	//防止切换时间时进行累加
	axisChange.value = [];
	if (!props.xAxis.length) return;
	for (let i = 0; i < props.xAxis.length; i++) {
		if (typeof props.xAxis[i] === 'string') {
			let str = props.xAxis[i] as string;
			let len = str.length;

			axisChange.value[i] = str.substring(str.indexOf('T') + 1, len);
		}
	}
}
//判断当前图表的副标题
function getSubTitle() {
	switch (props.lineTitle) {
		case '交易量':
			subTitle.value = '(单位/笔)';
			contentText.value = '当前值:业务所选时间段内的变化情况。环比:与上一个相邻时间段(如前一天)的环比变化情况。同比:与上个月同时间段的同比变化情况。';
			questionIconLeft.value = '105px';
			break;
		case '平均办理时长':
			subTitle.value = '(单位/ms)';
			contentText.value =
				'当前值:业务所选时间段内的变化情况。环比:与上一个相邻时间段(如前一天)的环比变化情况。同比:与上个月同时间段的同比变化情况。 ';
			break;
		case '平均服务端耗时':
			subTitle.value = '(单位/ms)';
			contentText.value =
				'当前值:业务所选时间段内的变化情况。环比:与上一个相邻时间段(如前一天)的环比变化情况。同比:与上个月同时间段的同比变化情况。  ';
			questionIconLeft.value = '170px';
			break;
		case '健康度':
			subTitle.value = '(单位/%)';
			contentText.value = '当前值:业务所选时间段内的变化情况。环比:与上一个相邻时间段(如前一天)的环比变化情况。同比:与上个月同时间段的同比变化情况。';
			questionIconLeft.value = '105px';
			break;
		default:
			break;
	}
}
//初始化函数
function init() {
	handleTime();
	businessGetName();
	getSubTitle();
	const extendYAxisStyle: anyObj = {};
	if (props.Id === 'health') {
		extendYAxisStyle.min = 0;
		extendYAxisStyle.max = 100;
	}
	//由于全局注册了echart在这里可以直接调用$echarts来初始化
	let myChart = echarts.init(document.getElementById(props.Id) as HTMLElement);
	myChart.clear();

	if (axisChange.value === null || axisChange.value === undefined || axisChange.value.length <= 0) {
		// 无数据
		myChart.setOption({
			title: {
				text: props.lineTitle,
				subtext: subTitle.value,
				padding: [5, 20, 150, 40],
				textStyle: {
					color: '#fff',
					fontSize: 16,
					textAlign: 'left',
				},
				subtextStyle: {
					color: '#fff',
					fontSize: 14,
					textAlign: 'left',
				},
			},
		});
		noDataFlag.value = true;
		return;
	}
	// 有数据
	noDataFlag.value = false;
	myChart.setOption({
		grid: {
			top: '20%',
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true,
		},
		//设置右上图标
		legend: {
			padding: [10, 38, 10, 0], //设置右上的小图标的内边距
			data: legendArray.value, //必须与seies同时存在-------动态获取数据
			textStyle: {
				color: '#ffffff',
			},
			itemHeight: 8,
			left: 'right',
		},
		//设置图表标题
		title: {
			text: props.lineTitle, //------需要进行动态获取
			subtext: subTitle.value,
			padding: [5, 20, 150, 40],
			textStyle: {
				color: '#fff',
				fontSize: 16,
				textAlign: 'left',
			},
			subtextStyle: {
				color: '#fff',
				fontSize: 14,
				textAlign: 'left',
			},
		},
		tooltip: {
			trigger: 'axis',
		},
		//横坐标
		xAxis: {
			type: 'category',
			data: axisChange.value, //横坐标的数据--------需要进行动态获取
			offset: 10,
			showMaxLabel: true,
			showMinLabel: true,
			axisLabel: {
				//底部文字倾斜
				textStyle: {
					color: '#ffffff', //设置横坐标字体颜色为白色
					fontSize: '16px',
				},
				margin: 20,
			},
			axisLine: {
				lineStyle: {
					color: '#ffffff',
				},
			},
			axisTick: {
				alignWithLabel: true, //设置横坐标的刻度与横坐标的文字对齐
				show: false,
			},
		},
		//纵坐标
		yAxis: {
			type: 'value',
			nameTextStyle: {
				color: '#ffffff',
			},
			axisLabel: {
				show: true,
				interval: 'auto',
				textStyle: {
					fontSize: 14,
					color: '#ffffff',
				},
			},
			axisLine: {
				show: false,
			},
			splitLine: {
				show: true,
				lineStyle: {
					//横线样式
					color: '#ffffff',
					opacity: 0.2,
				},
			},
			axisTick: {
				show: false,
			},
			...extendYAxisStyle,
		},
		//折线数据
		series: seriesData.value, //动态数据
	});

	window.addEventListener('resize', function () {
		myChart.resize();
	});
}
</script>

<style scoped>
.bg-chart {
	position: relative;
}

.table-background-color {
	padding: 15px 0px 20px 0px;
}

.title-icon {
	content: '';
	background: #2beded;
	width: 10px;
	height: 9px;
	border-radius: 50%;
	margin-right: 2px;
	vertical-align: 110%;
	position: absolute;
	display: block;
	left: 20px;
	top: 19px;
}

.question-icon {
	width: 10px;
	height: 9px;
	border-radius: 50%;
	margin-right: 2px;
	vertical-align: 110%;
	position: absolute;
	display: block;
	top: 17px;
}

.svg-icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: white;
	overflow: hidden;
}

.yd-smoonthline-no-data {
	position: absolute;
	left: 45%;
	top: 48%;
	color: #7d8591;
	font-size: 16px;
}
</style>
